import {
  defineComponent,
  ref,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  createElementVNode,
  unref,
  renderSlot
} from "vue";
import { b as useProp, _ as _export_sfc } from "./index-CEDaTd93.js";
const _hoisted_1 = { class: "dv-border-box-13" };
const _hoisted_2 = ["width", "height"];
const _hoisted_3 = ["fill", "stroke", "d"];
const _hoisted_4 = ["stroke"];
const _hoisted_5 = ["stroke"];
const _hoisted_6 = ["stroke", "d"];
const _hoisted_7 = { class: "border-box-content" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "BorderBox",
  props: {
    component: {}
  },
  setup(__props) {
    const props = __props;
    const { propValue } = useProp(props.component);
    const width = ref(150);
    const height = ref(150);
    const resizeHandler = entry => {
      const rect = entry.contentRect;
      width.value = rect.width;
      height.value = rect.height;
    };
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock("div", _hoisted_1, [
          (openBlock(),
          createElementBlock(
            "svg",
            {
              class: "dv-border-svg-container",
              width: width.value,
              height: height.value
            },
            [
              createElementVNode(
                "path",
                {
                  fill: unref(propValue).base.backgroundColor,
                  stroke: unref(propValue).base.colorLeft,
                  d: `
          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
          L ${width.value - 20} 10 L ${width.value - 5} 25
          L ${width.value - 5} ${height.value - 5} L 20 ${height.value - 5}
          L 5 ${height.value - 20} L 5 20
        `
                },
                null,
                8,
                _hoisted_3
              ),
              createElementVNode(
                "path",
                {
                  fill: "transparent",
                  "stroke-width": "3",
                  "stroke-linecap": "round",
                  "stroke-dasharray": "10 5",
                  stroke: unref(propValue).base.colorLeft,
                  d: `M 16 9 L 61 9`
                },
                null,
                8,
                _hoisted_4
              ),
              createElementVNode(
                "path",
                {
                  fill: "transparent",
                  stroke: unref(propValue).base.colorRight,
                  d: `M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`
                },
                null,
                8,
                _hoisted_5
              ),
              createElementVNode(
                "path",
                {
                  fill: "transparent",
                  stroke: unref(propValue).base.colorRight,
                  d: `M ${width.value - 5} ${height.value - 30} L ${
                    width.value - 5
                  } ${height.value - 5} L ${width.value - 30} ${
                    height.value - 5
                  }`
                },
                null,
                8,
                _hoisted_6
              )
            ],
            8,
            _hoisted_2
          )),
          createElementVNode("div", _hoisted_7, [
            renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ])
        ])),
        [[_directive_resize, resizeHandler]]
      );
    };
  }
});
const BorderBox = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-728e4e27"]
]);
export { BorderBox as default };
